cesium 材质设置

一、 Cesium 材质概览

在 Cesium 的 Entity API 中，材质主要通过 material 属性来设置。大体上，我们可以把材质分为两类：

通用材质 (General)：可以用在 Polygon (面)、Rectangle (矩形)、Ellipsoid (球)、Wall (墙) 等几何体上。
折线专用材质 (Polyline)：只能用在 Polyline (线) 上，这一类材质通常特效最炫酷。

二、通用材质 (给几何体换肤)

// 初始化 Cesium 视图容器
const viewer = new Cesium.Viewer('cesiumContainer');

1. 颜色材质 (ColorMaterialProperty)

最基础的材质，支持透明度。

// 添加一个红色的球体
viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0), // 设置位置：经度、纬度、高度
    ellipsoid: {
        radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0), // 设置球体的长宽高半径
        // 【重点】直接使用 Color 类，Cesium 会自动封装成 ColorMaterialProperty
        material: Cesium.Color.RED.withAlpha(0.5), // 红色，半透明
        outline: true, // 显示边框
        outlineColor: Cesium.Color.BLACK // 边框颜色
    }
});

2. 图片/纹理材质 (ImageMaterialProperty)

把一张图片贴在物体表面，做地表覆盖、广告牌墙体时很常用。

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
    rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(-97.0, 38.0, -93.0, 42.0), // 矩形范围
        // 【重点】使用 ImageMaterialProperty 加载图片
        material: new Cesium.ImageMaterialProperty({
            image: 'path/to/your/image.png', // 图片地址，可以是本地路径或 URL
            color: Cesium.Color.WHITE, // 颜色混合，WHITE 表示保持原图色彩
            transparent: true // 是否开启透明通道（如果是 PNG 透明图，一定要设为 true）
        })
    }
});

3. 网格材质 (GridMaterialProperty)

非常有科技感，常用于调试或者制作“覆盖层”效果。

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-90.0, 40.0),
    wall: {
        positions: Cesium.Cartesian3.fromDegreesArray([-91.0, 40.0, -89.0, 40.0]), // 墙的轨迹
        maximumHeights: [100000, 100000], // 墙的高度
        // 【重点】Grid 材质
        material: new Cesium.GridMaterialProperty({
            color: Cesium.Color.YELLOW, // 网格线的颜色
            cellAlpha: 0.2, // 单元格中间区域的透明度
            lineCount: new Cesium.Cartesian2(8, 8), // 行列的网格数量
            lineThickness: new Cesium.Cartesian2(2.0, 2.0) // 网格线的粗细
        })
    }
});

4. 条纹材质 (StripeMaterialProperty)

类似斑马线的效果。

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-85.0, 40.0, 100000.0),
    ellipsoid: {
        radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
        // 【重点】Stripe 材质
        material: new Cesium.StripeMaterialProperty({
            evenColor: Cesium.Color.WHITE, // 偶数条纹颜色
            oddColor: Cesium.Color.BLUE,   // 奇数条纹颜色
            repeat: 10, // 条纹重复次数
            orientation: Cesium.StripeOrientation.VERTICAL // 条纹方向：垂直或水平
        })
    }
});

5. 棋盘材质 (CheckerboardMaterialProperty)

黑白相间（或者自定义颜色）的棋盘格，适合做地面铺装效果。

viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-80.0, 40.0, 100000.0),
    plane: {
        plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0), // 创建一个平面
        dimensions: new Cesium.Cartesian2(400000.0, 400000.0), // 平面尺寸
        // 【重点】Checkerboard 材质
        material: new Cesium.CheckerboardMaterialProperty({
            evenColor: Cesium.Color.RED, // 偶数格颜色
            oddColor: Cesium.Color.WHITE, // 奇数格颜色
            repeat: new Cesium.Cartesian2(4, 4) // 横向和纵向的重复次数
        })
    }
});

三、线状材质 (Polyline 专属，特效拉满)

注意：以下材质只能用在 polyline 属性中，用在 wall 或者 polygon 上会报错或者不显示！

1. 箭头材质 (PolylineArrowMaterialProperty)

用来画航线、轨迹线非常合适。

viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]), // 线条坐标点
        width: 10, // 线宽，宽一点箭头才明显
        // 【重点】箭头材质
        material: new Cesium.PolylineArrowMaterialProperty(
            Cesium.Color.PURPLE // 箭头的颜色
        )
    }
});

2. 虚线材质 (PolylineDashMaterialProperty)

常用于表示规划路线或边界。

viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([-75, 40, -125, 40]),
        width: 5,
        // 【重点】虚线材质
        material: new Cesium.PolylineDashMaterialProperty({
            color: Cesium.Color.CYAN, // 线条颜色
            gapColor: Cesium.Color.TRANSPARENT, // 间隙颜色，设为透明即为镂空
            dashLength: 30.0, // 每一段虚线的长度
            dashPattern: 255 // 虚线样式的二进制掩码（高级用法，一般默认即可）
        })
    }
});

3. 发光/光晕材质 (PolylineGlowMaterialProperty)

这是我最喜欢的材质，这就是传说中的“流光效果”的基础，非常有科技感，适合做智慧城市路网。

viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([-75, 45, -125, 45]),
        width: 10, // 宽度大一点，光晕效果更好
        // 【重点】光晕材质
        material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.2, // 发光强度，数值越小，中心越亮，边缘越模糊
            taperPower: 0.5, // 尾部锥形效果，1.0 表示无锥形
            color: Cesium.Color.CORNFLOWERBLUE // 最终呈现的颜色
        })
    }
});

4. 轮廓材质 (PolylineOutlineMaterialProperty)

给线条加个描边，能让线条在复杂的背景地图上更清晰。

viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([-75, 50, -125, 50]),
        width: 10,
        // 【重点】轮廓材质
        material: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.ORANGE, // 内部线条颜色
            outlineWidth: 2, // 轮廓宽度
            outlineColor: Cesium.Color.BLACK // 轮廓颜色
        })
    }
});